<template>
  <view class="container">
    <!-- 页面头部标题 -->
    <view class="new-page-header">
      <!-- 状态栏占位 -->
      <view class="new-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏 -->
      <view class="new-nav-bar" :style="{ height: navBarHeight + 'px' }">
        <!-- 返回按钮 -->
        <view class="new-back-button" @click="goBack">
          <u-icon name="arrow-left" size="36" color="#ffffff"></u-icon>
        </view>
        <!-- 标题 -->
        <view class="new-header-title" :style="{ lineHeight: navBarHeight + 'px' }">订单详情</view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 设备信息 -->
      <view class="device-info">
        <view class="info-title">设备信息</view>
        <view class="info-row">
          <view class="info-label">设备名称</view>
          <view class="info-value">陪护床</view>
        </view>
        <view class="info-row">
          <view class="info-label">设备编号</view>
          <view class="info-value">100005</view>
        </view>
        <view class="info-row">
          <view class="info-label">开始时间</view>
          <view class="info-value">
            2025年05月01日 
            <text class="time-highlight green">00时00分</text>
          </view>
        </view>
        <view class="info-row">
          <view class="info-label">到期时间</view>
          <view class="info-value">
            2025年05月01日 
            <text class="time-highlight red">07时00分</text>
          </view>
        </view>
        <view class="info-row">
          <view class="info-label">收费标准</view>
          <view class="info-value">2元/小时</view>
        </view>
        <view class="info-row">
          <view class="info-label">付款金额</view>
          <view class="info-value">
            <text class="price">16.00</text>
            <text class="duration-hint">元（合理时2小时金额）</text>
          </view>
        </view>
        <view class="info-row">
          <view class="info-label">押金金额</view>
          <view class="info-value">
            <text class="price">100.00</text>
            <text class="duration-hint">元</text>
          </view>
        </view>
        
      </view>

      <!-- 订单号码 -->
      <view class="device-info">
        <view class="info-row">
          <view class="info-label">支付时间</view>
          <view class="info-value">2025年05月01日 00时00分</view>
        </view>
        <view class="order-number-card">
          <view class="order-title">订单号码</view>
          <view class="order-number">
            <text class="number-text">100545054500000</text>
            <text class="copy-btn" @click="copyOrderNumber">复制</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navbarMixin from '@/common/mixin/navbar.js'

export default {
  mixins: [navbarMixin],
  
  data() {
    return {
      // 订单号
      orderNumber: '100545054500000'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取订单详情
  },

  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },

    /**
     * 复制订单号
     */
    copyOrderNumber() {
      uni.setClipboardData({
        data: this.orderNumber,
        success: () => {
          uni.showToast({
            title: '已复制订单号',
            icon: 'success'
          })
        }
      })
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    return {
      title: '订单详情',
      path: "/pages/newcompleted/index"
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 120rpx;
}

.page-header {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  padding: 60rpx 40rpx 30rpx;
  display: flex;
  align-items: center;
  position: relative;
  
  .back-button {
    position: absolute;
    left: 40rpx;
    top: 50%;
    transform: translateY(-23%);
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    flex: 1;
  }
}

.device-info {
  background: #ffffff;
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 20rpx 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .info-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #999999;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333333;
      text-align: right;
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .price {
        color: #74b9ff;
        font-weight: 600;
      }
      
      .duration-hint {
        font-size: 24rpx;
        color: #999999;
      }
      
      .time-highlight {
        &.green {
          color: #00b894;
        }
        
        &.red {
          color: #fd79a8;
        }
      }
    }
  }
}

.order-number-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  .order-title {
    font-size: 28rpx;
    color: #999999;
  }
  
  .order-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;

    .number-text {
      font-size: 28rpx;
      color: #333333;
    }
    
    .copy-btn {
      background: #74b9ff;
      color: #ffffff;
      font-size: 24rpx;
      margin-left: 24rpx;
      padding: 8rpx 16rpx;
      border-radius: 24rpx;
    }
  }
}
</style> 